
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <title>Conexi&oacute;n</title>
  
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href='css/estiloprincipal.css ' rel='stylesheet'>
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
    <link type="text/css" href="css/flick/jquery-ui-1.10.3.custom.css" rel="stylesheet">
    <link rel="shortcut icon" href="img/user1_monitor.ico"/>
    
    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/jquery-ui-1.10.3.custom.js"></script>
    <script src="js/jquery-ui-1.10.3.custom.min.js"></script>
    <script src="js/jquery.ui.datepicker-es.js"></script>
  </head>

  <body>
   <div class="container">
      <div class="row-fluid">
          <div class="hero-unit">
            <h2>Crear Usuario</h2>
            <form  name="form" method="POST" action="ProcesaRegistro.php">
            <table border="0" class=" table table-condensed">
                <thead>
                    <tr>
                        <th colspan="2"><div align="center"><h4>Informacion Personal</h4></div></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><div align="right"><font color="red">*</font>Nombres:</div></td>
                        <td><input type="text" title="Se necesitan nombres" name="nombre1" required/></td>
                    </tr>                  
                    <tr>
                        <td><div align="right"><font color="red">*</font>Apellidos:</div></td>
                        <td><input type="text" title="Se necesitan apellidos" name="apellido1" required/></td>
                    <tr>
                        <td><div align="right"><font color="red">*</font>Fecha de nacimiento:</div></td>
                        <td><input type="text" id="fecha" name="fecha_nacimiento" required /></td>
                    </tr>
                    <tr> 
                        <td><div align="right"><font color="red">*</font>Direccion:</div></td>
                        <td><input type="text" name="direccion" size="50" required/></td>
                    </tr>
                </tbody>
            </table>
            <hr>
            
            <table border="0" class="table table-condensed">
                <thead>
                    <tr>
                        <th colspan="2"><div align="center">Informacion del contacto</div></th>                    
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><div align="right"><font color="red">*</font>Email:</div></td>
                        <td><input type="email" name="email" required="required"/></td>
                    </tr>
                    <tr>
                        <td><div align="right">Telfono fijo:</div></td>
                        <td><input type="tel" name="telefono_fijo"/></td>
                    </tr>
                    <tr>
                        <td><div align="right">Telefono movil:</div></td>
                        <td><input type="tel" name="telefono_movil" /></td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
            
            <hr>
            <table border="0" class="table table-condensed">
                <thead>
                    <tr>
                        <th colspan="2"><div align="center">Informacion de Registro</div></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><div align="right"><font color="red">*</font>Usuario:</div></td>
                        <td><input type="text" name="usuario" required=""/></td>
                    </tr>
                    <tr>
                        <td><div align="right"><font color="red">*</font>Password:</div></td>
                        <td><input type="password" name="password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])\w{6,}" onchange="form.pwd2.pattern = this.value;"/></td>
                    </tr>
                    <tr>
                        <td><div align="right"><font color="red">*</font>Confimar password:</div></td>
                        <td><input type="password" name="pwd2" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])\w{6,}" title="Deben coincidir las contraseñas"/></td>
                    </tr>
                </tbody>
            </table>
            <br>
            <p class="text-center text-error">Campos Obligatorios *</p>
            <br>
            <center>
            <input type="submit" value="Registrarse" name="Registrar" class="btn btn-success"/>
            <input type="button" value="Cancelar" name="Cancelar" class="btn" onclick="location.href='principal.php'"/>
            </center>
            </form>
            
            <script>
            $( "#fecha" ).datepicker({
                   dateFormat: 'yy-mm-dd',
                   changeMonth: true,
                   changeYear: true,
                   yearRange: "1910:2013"
            });
            

            </script>
          </div>
      </div><!--/row-->
      <hr>
      <footer>
        <center><p>&copy; Conexi&oacute;n 2013</p></center>
      </footer>
    </div>
       <script src="js/jquery.js"></script>
       <script src="js/bootstrap-alert.js"></script>
  </body>
</html>
